<template>
	<view>
		<view class="fixed-top">
			<view class="acea-row row-middle row-between search-header">
				<!-- 	<view class="acea-row row-middle search-box">
					<view class="city">
						<cityPicker @change="cityChange" />
					</view>
					<view class="search-ipt">
						<text class="iconfont icon-xiazai5"></text>
						商铺/写字楼/门面
					</view>
				</view>
				<view class="search-map" @click="toPage('/pages/others/mapFinding/mapFinding')">
					<image src="@/static/images/map_index_icon.png" mode=""></image>
					<view>地图找铺</view>
				</view> -->
				<searchNavbar @changeCity="changeCitys" :parameter="parameter" :isMap="true" style="width: 100%;"></searchNavbar>
			</view>
			<tabNav :tabTitle="tabTitle" :tabNavOn="tabNavOn" @changeTab="changeTab"></tabNav>
		</view>

		<view class="index-content">
			<!-- banner -->
			<view class="banner-box">
				<view class="swiper-box">
					<swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" duration="500"
						indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
						<block v-for="item in indexData.banner" :key="item.id">
							<swiper-item>
								<navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper'
									hover-class='none'>
									<image :src="item.pic" mode="" class="slide-image" />
								</navigator>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<!-- menu菜单 平台数据  新闻资讯 -->
			<view class="news-box" v-if="tabNavOn==0 || tabNavOn==1">
				<!-- menu菜单 -->
				<menuModule :menus="indexData.menus"></menuModule>
				<!-- 平台数据 -->
				<view class="acea-row row-middle row-between platform-datas">
					<view class="platform-item" v-for="(item,index) in platforms" :key="index" @click="runList(index)">
						<text class="datas" :class="{'datas-doc':item.name!='成功案例'}"> {{item.num}}</text>
						<view class="name">{{item.name}}</view>
					</view>
				</view>

				<!-- 新闻资讯 -->
				<newsModule></newsModule>
			</view>

			<!-- 模块 -->
			<!-- 推荐 -->
			<nav-recommend v-if=" (tabNavOn==0 || tabNavOn==1)" :tabNavOn="tabNavOn" :refsh="needToRefsh"
				@changeTab="changeTab"></nav-recommend> 
			<!-- 商铺专区 -->
			<nav-shop-area v-if="tabNavOn==1"></nav-shop-area>
			<!-- 二手专区 -->
			<nav-second-hand v-if="tabNavOn==2" :tabNavOn="tabNavOn"></nav-second-hand>
			<!-- 供应链专区 -->
			<nav-supply-chain v-if="tabNavOn==3" :tabNavOn="tabNavOn"></nav-supply-chain>
			<!-- 商家服务专区 -->
			<nav-merchant-service v-if="tabNavOn==4" :tabNavOn="tabNavOn"></nav-merchant-service>
			<!-- 招工专区 -->
			<nav-recruit v-if="tabNavOn==5" :city="city" :tabNavOn="tabNavOn" :refsh="needToRefsh"></nav-recruit>
		</view>
		<view class="uni-p-b-98"></view>
		
		<tabBar :pagePath="'/pages/index/index'"></tabBar>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import tabBar from "@/components/tabBar";
	import cityPicker from "./components/cityPicker";
	import newsModule from './components/newsModule.vue'
	import tabNav from "@/components/tabNav";
	import Cache from '@/utils/cache';
	import menuModule from './components/menuModule.vue'
	import navRecommend from './components/navRecommend/navRecommend.vue'
	import navShopArea from './components/navShopArea/navShopArea.vue'
	import navSupplyChain from './components/navSupplyChainArea/navSupplyChainArea.vue'
	import navSecondHand from './components/navSecondHandArea/navSecondHandArea.vue'
	import navMerchantService from './components/navMerchantService/navMerchantService.vue'
	import navRecruit from './components/navRecruitArea/navRecruitArea.vue'
	import searchNavbar from '@/components/searchNavbar/searchNavbar.vue'
	
	import {
		getShare
	} from "@/api/public.js";
	import {
		getCensusApi,
		getCityApi,
		getIndexData
	} from "@/api/api.js";
	import {
		toPage
	} from "@/filters/commFilter.js"
	let app = getApp();
	export default {
		components: {
			newsModule,
			menuModule,
			tabBar,
			tabNav,
			navRecommend,
			navShopArea,
			navSupplyChain,
			navSecondHand,
			navMerchantService,
			navRecruit,
			cityPicker,
			searchNavbar
		},
		onReachBottom() {
			uni.$emit('onReachBottom');
		},
		data() {
			return {
				indexData: {},
				imgUrls: [],
				parameter: {
					return: false,
					navH: 0,
					placeholder: '商铺/写字楼/门面'
				},
				autoplay: true,
				needToRefsh: 0,
				statusBarHeight: statusBarHeight,
				platforms: [{
					name: '正在出租套数',
					num: 0
				}, {
					name: '正在转让套数',
					num: 0
				}, {
					name: '正在出售套数',
					num: 0
				}, {
					name: '正在求租人数',
					num: 0
				}, {
					name: '正在求购人数',
					num: 0
				}, {
					name: '成功案例',
					num: 0
				}],
				city: 0,
				shareInfo: {},
				tabTitle: [{
					cate_name: '推荐'
				}, {
					cate_name: '商铺房屋'
				}, {
					cate_name: '二手'
				}, {
					cate_name: '供应链'
				}, {
					cate_name: '商家服务'
				}, {
					cate_name: '招工'
				}],
				tabNavOn: 0,
				cityList: [],
				refreshKey: false,
				inter: null,
				inNum: 0
			}
		},
		created() {
			uni.hideTabBar()
		},
		onShow() {
			let that = this;
			this.refreshKey = false;
			this.getIndex();
			this.regresh();
			

		},
		mounted() {

		},
		onHide() {},
		methods: {
			changeCitys(){
				console.log('change了')
				this.regresh();
			},
			regresh(){
				let that = this;
				this.$nextTick(() => {
					this.refreshKey = true;
					this.needToRefsh++;
					// this.getCensusList();
					console.log("diaoyong")
					if (this.$city) {
						console.log("有city",this.$city)
						this.getCensusList();
					} else {
						if(!that.inter){
							that.inter = setInterval(() => {
								if (that.$city) {
									that.getCensusList();
									that.inNum = 0;
									console.log("清除")
									clearInterval(that.inter)
									that.inter = null;
								}else{
									that.$reLocation(()=>{
										uni.$emit('reloadCity')
									});
								}
								that.inNum++;
							}, 1000)
						}
					}
					if(!this.$city){
						this.$reLocation(()=>{
							uni.$emit('reloadCity')
						});
					}else{
						uni.$emit('reloadCity')
					}
					
				})
			},
			runList(ind) {
				console.log(ind);
				let m = this.indexData.menus.map(item => {
					let type = -1;
					switch (item.name) {
						case '商铺':
							type = 883;
							break;
						case '写字楼':
							type = 884;
							break;
						case '仓库':
							type = 885;
							break;
						case '厂房':
							type = 911;
							break;
						case '土地':
							type = 912;
							break;
						case '房屋':
							type = 913;
							break;
						case '公寓':
							type = 1014;
							break;
						default:
							type = -1;
					}
					return {
						name: item.name,
						type
					}
				});
				let s = [{
					name: '出租',
					status: 1
				}, {
					name: '转让',
					status: 3
				}, {
					name: '出售',
					status: 2
				}, {
					name: '求租',
					status: 4
				}, {
					name: '求购',
					status: 5
				}]
				console.log("indexData",m)
				let url = '/pages/others/shopAreaList/shopAreaList?index='+(s[ind]? 1 :(m.length+1) )+'&type=' +( s[ind]?s[ind].status:0) + '&m=' + JSON.stringify(
					m);
				uni.navigateTo({
					url
				})
			},
			toPage,
			//获取首页数据
			async getIndex() {
				try {
					let res = await getIndexData();
					this.indexData = res.data
				} catch (e) {
					//TODO handle the exception
				}
			},
			//选择城市
			cityChange(e) {
				this.getCensusList();
			},
			//获取经营信息统计
			async getCensusList() {
				try {
					let p ={
						city: this.$city,
					}
					if(this.tabNavOn==1){
						p.storeCategory= 883
					}		
					let res = await getCensusApi(p);
					let val = res.data;
					this.platforms[0].num = val.hireNum*10;
					this.platforms[1].num = val.transferNum*10;
					this.platforms[2].num = val.saleNum*10;
					this.platforms[3].num = val.asKNum*10;
					this.platforms[4].num = val.wantNum*10;
					this.platforms[5].num = val.successNum*10;
				} catch (e) {
					//TODO handle the exception
				}
			},
			topTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			changeTab(e) {
				if (e.type == 'big') {
					this.tabNavOn = e.index;
					this.getCensusList();
				}
				this.topTop()
			},

			// 微信分享；
			setOpenShare: function() {
				let that = this;
				getShare().then((res) => {
					let data = res.data;
					this.shareInfo = data;
					// #ifdef H5
					let url = location.href;
					if (this.$store.state.app.uid) {
						url =
							url.indexOf("?") === -1 ?
							url + "?spread=" + this.$store.state.app.uid :
							url + "&spread=" + this.$store.state.app.uid;
					}
					if (that.$wechat.isWeixin()) {
						let configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: url,
							imgUrl: data.img,
						};
						that.$wechat.wechatEvevt(
							["updateAppMessageShareData", "updateTimelineShareData"],
							configAppMessage
						);
					}
					// #endif
				});
			},
		},
		onReachBottom: function() {
			if (this.isDiy) {
				this.$refs.diy.onsollBotton()
			}
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {
				title: this.shareInfo.title,
				path: "/pages/index/index?spid=" + this.$store.state.app.uid || 0,
				imageUrl: this.shareInfo.img,
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				query: {
					spid: this.$store.state.app.uid || 0
				},
				imageUrl: this.shareInfo.img,
			};
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	// menus 新闻资讯
	.news-box {
		width: calc(100% - 52rpx);
		margin: 164rpx 26rpx 28rpx;
		background: #ffffff;
		opacity: 1;
		border-radius: 10rpx;
		padding: 36rpx;
	}

	// 平台数据
	.platform-datas {
		margin-bottom: 36rpx;

		// display: grid;
		/*  声明列的宽度  */
		// grid-template-columns: repeat(3, 30%);
		.platform-item {
			// width: 30%;
			// text-align: center;
			// width: 160rpx;
			margin-bottom: 24rpx;

			.datas {
				font-size: 44rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.name {
				width: 180rpx;
				font-size: 22rpx;
				color: rgba(128, 128, 128, 1);
			}

			.datas-doc {
				padding-right: 22rpx;
				position: relative;
				display: inline-block;

				&::after {
					display: block;
					content: '＋';
					position: absolute;
					color: rgba(239, 42, 54, 1);
					font-size: 22rpx;
					top: 0;
					right: 0;
				}
			}
		}
	}


	.slide-navigator {
		width: 100%;
		height: 100%;
	}

	.slide-navigator .slide-image {
		width: 100%;
		height: 100%;
	}

	.sys-head {
		width: 100%;
		background: #EE212D;
	}

	.fixed-top {
		width: 100%;
		height: 210rpx;
		background: #EE212D;
		position: fixed;
		top: 0%;
		left: 0;
		z-index: 999;
	}

	.search-header {
		width: 100%;
		// padding: 26rpx 0 0;
		background: #EE212D;

		.search-map {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;

			image {
				width: 40rpx;
				height: 36rpx;
			}
		}
	}

	.search-box {
		width: 586rpx;
		height: 70rpx;
		opacity: 1;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 1);
		padding: 12rpx 32rpx;

		.city {
			margin-right: 26rpx;
			padding-right: 32rpx;
			position: relative;
			font-size: 16px;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			max-width: 140rpx;
			lines: 1;
			text-overflow: ellipsis;

			&::after {
				display: block;
				content: '';
				width: 26rpx;
				height: 16rpx;
				background-image: url('/static/images/city_sanjiao.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -8rpx;
			}
		}

		.search-ipt {
			color: rgba(166, 166, 166, 1);

			text {
				padding: 0 16rpx 0 26rpx;
				border-left: 1px solid rgba(229, 229, 229, 1);
			}
		}
	}


	.index-content {
		margin-top: 210rpx;
	}

	// banner
	.banner-box {
		width: 100%;
		height: 146rpx;
		background: #EE212D;
		position: relative;

		.swiper-box {
			width: calc(100% - 52rpx);
			height: 108px;
			overflow: hidden;
			position: absolute;
			left: 26rpx;
			top: 23rpx;
			opacity: 1;
			border-radius: 10rpx;
			box-shadow: 5rpx 6rpx 8rpx 0rpx rgba(238, 33, 45, 0.05);
		}
	}
</style>